/**
 * 一个指令的定义对象可以提供几种钩子函数 (都是可选的)：
 *  https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks
 */
import { useUserStore } from "@/stores/user";
import { storeToRefs } from "pinia";
import pinia from "@/stores";

// 导入用户信息
const { userInfo } = storeToRefs(useUserStore(pinia));

export default {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  //   el：指令绑定到的元素。这可以用于直接操作 DOM。
  created(el: any, binding: any, vnode: any, prevVnode: any) {
    // 下面会介绍各个参数的细节
    // console.log("指令被创建了", el);
    // el.dataset.a = "1";
    // el.addEventListener("click", function () {
    //   console.log(123);
    // });
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el: any, binding: any, vnode: any, prevVnode: any) {
    el.remove();
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el: any, binding: any, vnode: any, prevVnode: any) {
    // v-on: el.addEventListener(binding.arg, binding.value}
    // binding.value 得到的值就是指令 = 后面的值 v-premission="'btn.Trademark.add'"
    // binding.value = 'btn.Trademark.add'
    // console.log(userInfo.value.buttons, binding.value);
    if (!userInfo.value.buttons.includes(binding.value)) {
      // 不具备权限，remove
      el.remove();
    }
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el: any, binding: any, vnode: any, prevVnode: any) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el: any, binding: any, vnode: any, prevVnode: any) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el: any, binding: any, vnode: any, prevVnode: any) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el: any, binding: any, vnode: any, prevVnode: any) {},
};
